/*
 * @Author: scopesang
 * @Date: 2022-04-08 09:52:16
 * @LastEditors: scopesang
 * @LastEditTime: 2022-04-08 10:41:32
 * @FilePath: \cms-manage\src\textApp\App04Props.jsx
 * @Description: 
 * 
 * Copyright (c) 2022 by scopesang/大鹏科技, All Rights Reserved. 
 */
import React, { Component } from 'react'
import PropTypes from 'prop-types'
//定义一个头部组件(子组件)
export default class App04Props extends Component {
    // 定义默认值，在class内部，通过static修饰的属性，就是静态属性
    static defaultProps = {
        num: 888
    }
    static propTypes = {
        num: PropTypes.number.isRequired
    }
    // 静态变量和静态方法是挂在类自身上面的变量和方法。
    // 1.静态方法/属性使用类名访问
    // *   2.非静态方法/属性使用实例名访问
    //静态对象可直接使用，无需创建实例

    handleClick() {
        // 给props对象挂在一个changeNum方法，携带参数999
        this.props.changeNum(999)
    }
    render() {
        return (
            <div>
                {/* // 父传子 */}
                <div>{this.props.num}</div>
                {/* // 子传父 */}
                <h2>{this.props.num}</h2>
                {/* 子级通过 this.props.子级事件名(参数) 将事件传递给父级，父级在子组件标签上写： */}
                <div onClick={this.handleClick.bind(this)}>修改num</div>
            </div>
        )
    }
}

// 子组件中可以限制传进来的props属性值的数据类型

// 实现步骤：

// 1、先导入import PropTypes from 'prop-types' （注意：无需安装，直接引入即可）

// 2、在子组件中定义静态属性propTypes：
